<!--
盒子模型
        不同模型，宽高的计算方式不同
    box-sizing
        - content-box
            传统盒子模型，不写时默认的模型
                最终盒子width = width（内容） + padding*2（内边距） + border*2（边框）
            属性padding、border会撑大盒子，会影响盒子宽度

        - border-box
            CSS3盒子模型
            属性padding、border会往里压缩盒子，但不影响盒子宽度
                最终盒子width = width（内容）
            除非属性padding、border超过width，才会逆转压缩撑大盒子

注意：margin外边距是盒子模型中的内容，但不影响盒子宽度，因为它是盒子间距，只是也会影响布局而已。

拓展：初始化再加CSS3盒子的设置！
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
-->
<style>
  .box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 20px solid red;
    margin: 30px;
    background-color: cyan;
    box-sizing: border-box;
    /* box-sizing: content-box; */
  }
</style>

<div class="box">hello world</div>
